<script setup lang="ts">
import { dayjs, ikDate } from 'iking-utils'

const props = withDefaults(defineProps<{
  dotDates?: Array<string>
}>(), {
  dotDates: () => []
})

const emit = defineEmits(['change', 'change-dates'])

const methods = {
  next: () => {
    // const last = state.dates[state.dates.length - 1].date
    // const week = ikDate.getWeek(dayjs(last).add(1, 'days').toDate())

    // const dates =
    const nextDate: any = ikDate.toDate(dayjs(state.dates[state.dates.length - 1]).add(1, 'days').toDate())

    state.dates.push(nextDate)
    state.dates.shift()
    // state.dates = dates
    emit('change-dates', methods.getDates())
  },
  previous: () => {
    // const dates = state.dates

    const preDate = ikDate.toDate(dayjs(state.dates[0]).subtract(1, 'days').toDate())
    state.dates.unshift(preDate)
    state.dates.pop()
    emit('change-dates', methods.getDates())
  },
  getDay: (date: string) => {
    const index = date.lastIndexOf('-')
    const dayStr = date.substring(index + 1)
    return dayStr
  },
  getCurrentYM: () => {
    return ikDate.toYM(state.dates[0], 'YYYY年MM月')
  },
  toToday: () => {
    methods.setPrimaryDate(new Date())
    // state.dates = ikDate.getWeek(new Date())
    // state.today = ikDate.toDate(new Date())
    emit('change-dates', methods.getDates())
    emit('change', state.today)
  },
  clickDate: (date: any) => {
    state.today = date
    emit('change', date)
  },
  getDates: () => {
    return state.dates.map((item: string) => ({
      date: item
    }))
  },
  setPrimaryDate: (date: string | Date) => {
    state.today = ikDate.toDate(date)
    const dates = [state.today]
    // 往前两天
    for (let i = 1; i <= 2; i++) {
      //
      dates.unshift(ikDate.toDate(dayjs(date).subtract(i, 'days').toDate()))
    }

    // 往后两天
    for (let i = 1; i <= 2; i++) {
      //
      dates.push(ikDate.toDate(dayjs(date).add(i, 'days').toDate()))
    }

    state.dates = dates

    console.log('state.dates ', state.dates)
  }
}

const state = reactive<any>({
  dates: [],
  today: ikDate.toDate(new Date())
})

defineExpose({
  getDates: methods.getDates,
  setPrimaryDate: methods.setPrimaryDate
})

onMounted(() => {
  methods.setPrimaryDate(new Date())
})
</script>

<template>
  <div class="date-info-row">
    <span>{{ methods.getCurrentYM() }}</span>
    <span><el-button
      class="operation-button"
      link
      type="info"
      @click="methods.toToday"
    >回到当日</el-button></span>
  </div>
  <div class="week-calendar">
    <div class="operation">
      <IkSvgIcon
        :start-margin="false"
        name="iksvg_a-shouqibeifen2"
        show-bg
        @click="methods.previous"
      />
    </div>
    <div
      v-for="item in state.dates"
      :key="item"
      class="date-item"
      :class="[item === state.today ? 'is-today' : '']"
      @click="methods.clickDate(item)"
    >
      <div class="week">{{ ikDate.formatWeek(item)[0] }}</div>
      <div class="date">{{ methods.getDay(item) }}</div>
      <div :class="[dotDates.includes(item) ? 'dot' : '']">
        <div class="dot-content"></div>
      </div>
    </div>
    <div class="operation">
      <IkSvgIcon
        :start-margin="false"
        name="iksvg_shouqi-copy"
        show-bg
        @click="methods.next"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.date-info-row{
  margin-top: calc(var(--space-normal) * 3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: var(--color-font-secondary);

  :deep(.el-button){
    font-size: 16px;
    // color: var(--color-font-secondary);
  }
}

.week-calendar{
  margin-top: var(--space-large);
  display: flex;
  justify-content: space-between;

  .operation{
    line-height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .date-item{
    height: 68px;
    width: 60px;
    text-align:center;
    border-radius: 6px;
    background-color: var(--color-bg-page);
    padding: var(--space-small);
    cursor: pointer;

    &.is-today, &.is-today .week{
      background-color: var(--color-primary);
      color: var(--color-font-reverse);
    }

    .week{
      color: var(--color-font-secondary);
    }

    .date{
      font-size: 16px;
    }

    .dot{
      margin-top: var(--space-small);
      display: flex;
      justify-content: center;

      .dot-content{
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--color-primary);
      }
    }
  }
}

:deep(.ik-iksvg_a-shouqibeifen2 svg){
  font-size: 10px;
}
</style>
